var id=1;
var layer=layui.layer;
var form=layui.form;
function add(){

	var name=$("input[name='name']").val();
	
	var sex_val=$("input[name='sex']:checked").val()
	var hobby_val="";
	$("input[name='hobby']:checked").each(function(){
		hobby_val+=($(this).val()+" ")
	})
	var addr= $("select[name='addr']").val();
	var html="<tr id='tr"+id+"'>"
	+"<td id='td1"+id+"'>"+id+"</td>"
	+"<td id='td2"+id+"'>"+name+"</td>"
	+"<td id='td3"+id+"'>"+sex_val+"</td>"
	+"<td id='td4"+id+"'>"+hobby_val+"</td>"
	+"<td id='td5"+id+"'>"+addr+"</td>"
	+"<td id='td6"+id+"'>"
	+"<a href='javascript:upd("+id+");' class='layui-btn layui-btn-normal'>修改</a>"
	+"<a href='javascript:del("+id+");' class='layui-btn layui-btn-danger'>删除</a>"
	+"</td>"
	+"</tr>"
	id++;
	$("#tbody").append(html)
	
}

function del(id){
	layer.confirm("是否删除该记录",function(index){	
		$("#tr"+id).remove();
		layer.close(index)
	})
	
}
function upd(id){
	
	var name=$("#td2"+id).text()
	var html="<div class='layui-input-inline'>"+
	 " <input type='text' value='"+name+"' name='tname"+id+"' placeholder='姓名'  class='layui-input'>"
	+"</div>"
	$("#td2"+id).html(html)
	
	var sex=$("#td3"+id).text();
	$("#td3"+id).html("<label><input type='radio' name='sex"+id+"'  value='男'/>男</label>&nbsp;"
					+"<label><input type='radio' name='sex"+id+"'  value='女' /> 女</label>")
	$("input[name='sex"+id+"'][value='"+sex+"']").prop('checked',true)
    
	
	var aihao=$("#td4"+id).text();
	$("#td4"+id).html("<label><input type='checkbox' name='hobby"+id+"'  value='跑步' />跑步</label>"
						+"<label><input type='checkbox' name='hobby"+id+"' value='游泳' />游泳</label>"
						+"<label><input type='checkbox' name='hobby"+id+"'  value='羽毛球' />羽毛球</label>")
	$.each(aihao.split(" "),function(i,n){
	$("input[name='hobby"+id+"'][value='"+n+"']").prop("checked",true)
	})
	
	var addr2=$("#td5"+id).text();
	$("#td5"+id).html("<select  name='addr2"+id+"'>"
				+"<option value='北京'>北京</option>"
				+"<option value='青岛'>青岛</option>"
				+"<option value='武汉'>武汉</option>"
				+"<option value='哈尔滨'>哈尔滨</option>"
				+"<option value='潍坊'>潍坊</option>"
				+"</select>");
	$("select[name='addr2"+id+"']").val(addr2)
	
	$("#td6"+id).html("<a href='javascript:save("+id+");' class='layui-btn'>保存</a>")
}

function save(id){
	var name=$("input[name='tname"+id+"']").val();
	// console.log(name);
	var sex=$("input[name='sex"+id+"']:checked").val();
	
	var aihao="";
	$("input[name='hobby"+id+"']:checked").each(function(){
		aihao+=$(this).val()+" "
	})
	var addr=$("select[name='addr2"+id+"']").val()
	var jie="<a href='javascript:upd("+id+");' class='layui-btn layui-btn-normal'>修改</a>"
	+"<a href='javascript:del("+id+");' class='layui-btn layui-btn-danger'>删除</a>"
	$("#td2"+id).html(name);
	$("#td3"+id).html(sex);
	$("#td4"+id).html(aihao);
	$("#td5"+id).html(addr);
	$("#td6"+id).html(jie);
	
}
function sel(){
	$("tbody tr").css("background",'');
	var name=$("input[name='name2']").val();
	var city=$("select[name='city']").val();
	if(name==''&&city=='')return;
	$("tbody tr").each(function(){
		var n=$(this).find("td:eq(1)").text();
		var c=$(this).find("td:eq(4)").text();
		var b1=(name==''||n.indexOf(name)>-1);
		var b2=(city==''||c==city);
		if(b1&&b2){
			$(this).css("background",'red')
		}
	})
	
}